<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>在线答题</title>
    <include file="Public:headhtml"/>
</head>

<body>
<!--头部开始-->
<include file="Public:head"/>
<!--头部结束-->

<!--中间开始-->
<div class="center middle backgray">
    <div class="centern middle">
        <!--内容开始-->
        <ul>
            <li class="video_t1">课程：<{$rooms.name}></li>
            <li class="video_t2"><img src="/Static/images/hua_30.png"/> <span class="position_r"><{$teacher['name']}> <{$teacher['school']}></span>
            </li>
        </ul>


        <!--答题开始-->
        <div class="answer position_r">
            <a href="javascript:void(0);" class="datum_lt2 position_a" id="questions">提问<br/>试卷</a>
            <ul>
                <li class="answer_title" id="timer">剩余时间：<span><{$paper['question_time']}>分钟</span>

                </li>
            </ul>

            <!--题目开始-->
            <div class="answer_nr">
                <!--框开始-->
                <div class="question">
                    <foreach name="questionList" item="vo" key="key">
                        <ul class="answer_bor" style="<if condition='$key neq 0'> display:none</if>" id="questionId<{$vo.id}>">
                            <li class="answer_t1">第 <{$key+1}> 题：<{$vo.title}></li>
                            <if condition="$vo['image'] neq ''">
                                <li class="answer_t4"><img src="<{$vo['image']}>"/></li>
                            </if>
                            <if condition="$vo['option1'] neq ''">
                                <li class="answer_t2 aid1">
                                    A：<{$vo.option1}>
                                    <img src="/Static/images/hua_35.png" class="position_a answer_t3" />
                                    <img src="images/hua_39.png" class="position_a answer_t3"/>
                                </li>
                            </if>
                            <if condition="$vo['option2'] neq ''">
                                <li class="answer_t2 aid2">
                                    B：<{$vo.option2}>
                                    <img src="/Static/images/hua_35.png" class="position_a answer_t3"/>
                                    <img src="images/hua_39.png" class="position_a answer_t3"/>
                                </li>
                            </if>
                            <if condition="$vo['option3'] neq ''">
                                <li class="answer_t2 aid3">
                                    C：<{$vo.option3}>
                                    <img src="/Static/images/hua_35.png" class="position_a answer_t3"/>
                                    <img src="images/hua_39.png" class="position_a answer_t3"/>
                                </li>
                            </if>
                            <if condition="$vo['option4'] neq ''">
                                <li class="answer_t2 aid4">
                                    D：<{$vo.option4}>
                                    <img src="/Static/images/hua_35.png" class="position_a answer_t3"/>
                                    <img src="images/hua_39.png" class="position_a answer_t3"/>
                                </li>
                            </if>
                        </ul>
                    </foreach>
                </div>
                <!--框结束-->

                <!--卡开始-->
                <ul class="sheet">
                    <foreach name="questionList" item="vo" key="key">
                        <div class="sheet_div" id="sheet<{$vo.id}>">
                            <a href="javascript:void(0);" class="sheet_t1">
                                <li style="margin-left:3px;"><{$key+1}></li>
                            </a>
                            <br/>
                            <span>未选</span>
                        </div>
                    </foreach>

                    <!--<div class="sheet_div">-->
                        <!--<a href="#" class="sheet_t4">-->
                            <!--<li style="margin-left:3px;">1</li>-->
                        <!--</a>-->
                        <!--<br/>-->
                        <!--<span class="sheet_t5">已选</span>-->
                    <!--</div>-->


                    <div class="clean_game"></div>
                </ul>
                <!--卡结束-->

                <!--答案开始-->
                <div class="anwser">
                    <foreach name="questionList" item="vo" key="key">
                        <ul class="solution" style="<if condition='$key neq 0'> display:none</if>">
                            <if condition="$vo['option1'] neq ''">
                                <a href="javascript:void(0);" qid="<{$vo.id}>" aid="1" class="qa">
                                    <li style="margin-left:150px;">A</li>
                                </a>
                            </if>
                            <if condition="$vo['option2'] neq ''">
                                <a href="javascript:void(0);" qid="<{$vo.id}>" aid="2" class="qa">
                                    <li>B</li>
                                </a>
                            </if>
                            <if condition="$vo['option3'] neq ''">
                                <a href="javascript:void(0);" qid="<{$vo.id}>" aid="3" class="qa">
                                    <li>C</li>
                                </a>
                            </if>
                            <if condition="$vo['option4'] neq ''">
                                <a href="javascript:void(0);" qid="<{$vo.id}>" aid="4" class="qa">
                                    <li>D</li>
                                </a>
                            </if>
                            <div class="clean_game"></div>
                        </ul>
                    </foreach>
                </div>

                <!--答案结束-->


            </div>
            <!--题目结束-->


        </div>
        <!--答题结束-->
        <!--课程开始-->
        <ul class="brief_ul">
            <li class="brief_t1">课程简介</li>
            <li class="brief_t2"><{$rooms['description']}></li>
        </ul>
        <!--课程结束-->


        <!--内容结束-->
    </div>
</div>
<!--中间结束-->

<!--结尾开始-->
<include file="Public:footer"/>
<!--结尾结束-->
<script type="text/javascript">
    var roomId = "<{$Think.get.Rid}>";
    var paper = [];
    $(function () {
        $(".sheet .sheet_div").click(function () {
            var shuzhi = $(".sheet .sheet_div").index(this);
            $(this).addClass("sheet_t4").removeClass("sheet_t1").siblings().addClass("sheet_t1").removeClass("sheet_t4");

            $(".answer_nr .question .answer_bor").eq(shuzhi).show().siblings().hide();
            $(".anwser .solution").eq(shuzhi).show().siblings().hide();
        });
    });
    $(".qa").click(function(){
        var questionId = $(this).attr("qid");
        var anwserId = $(this).attr("aid");
        $("#questionId"+questionId+" .answer_t2").children("img").hide();
        $("#questionId"+questionId+" .aid"+anwserId+"").children("img").eq(0).show();
        $("#sheet"+questionId+"").children("span").addClass("sheet_t5").html("已选");
        paper.questionId[questionId] = anwserId;
        console.log(paper);
    })
    $(function(){

        $.ajax({
            type: 'POST',
            url: "/Question/paper",
            async:false,
            data: {'roomId': roomId},
            success: function (res) {
                paper = res;
            }
        })
    })

    $(function(){
        $("#questions").click(function(){

            if($(this).html() != "提问<br>试卷"){
                alert("请耐心等待，正在交卷中");
            }else{
                $(this).html("正在<br>交卷");
                $.ajax({
                    type: 'POST',
                    url: "/Question/postPaper",
                    async:false,
                    data: {'paper': paper},
                    success: function (res) {
                        console.log(res);
                        if(res['status'] == "ok"){
                            alert("答题完成,马上查看结果~");
                            window.location.href = "/Question/Result/Rid/"+roomId+"";
                        }else if(res['status'] == "has"){
                            alert("您已经答过此试卷了,马上看结果");
                            window.location.href = "/Question/Result/Rid/"+roomId+"";
                        }else if(res['status'] == "error"){
                            alert("答题结果保存失败");
                        }else{
                            alert("请求出错!");

                        }
                    }
                })

            }

        })
    })
</script>
<script type="text/javascript">
    var alltime =  parseInt("<{$paper['question_time']}>")*60;
    var maxtime = parseInt("<{$paper['question_time']}>")*60;

    function CountDown() {
        if (maxtime >= 0) {
            minutes = Math.floor(maxtime / 60);
            seconds = Math.floor(maxtime % 60);
            minutes = minutes >= 10 ? minutes : '0' + minutes;
            seconds = seconds >= 10 ? seconds : '0' + seconds;
            msg = "剩余时间：" + minutes + "分" + seconds + "秒";
            document.all["timer"].innerHTML = msg;
            paper.time = alltime-maxtime;
            --maxtime;
        }
        else {
            clearInterval(timer);
            alert("时间到，试卷将自动提交!");
            $("#questions").trigger("click");
        }
    }
    timer = setInterval("CountDown()",1000);
</script>
</body>
</html>
